<template>
	<view style="margin: 0 0rpx;background-color: white;">

		
		<!-- 日期 -->
		<scroll-view :scroll-x="true" style="" scroll-with-animation :scroll-into-view="scrollIntoId">
			<view class="date_list"
				:style="'background-color:' + (dark?'#272f30':'white') + ';padding-top:' + (dark ? '22rpx' : '0rpx') + ';padding-bottom:' + (dark ? '8rpx' : '0rpx') + ';'">
				<view v-for="(item, index) in date_list" :key="index"
					:class="'weekDate ' + (item.value === selected_date.value? 'current': 'normal')" @tap="switchDay"
					:data-currentday="item">
					<view :id="'A' + index" class="flex_col center"
						:style="{'border-radius':'4rpx','width':'76rpx','height':'84rpx','margin-right':'30rpx','margin-top':'0rpx', 'background-color':item.value === selected_date.value ? 'black' : 'white'}">
						<view :class="item.value === selected_date.value ? 'selected_week' : 'unselected_week'">
							{{item.weekText}}
						</view>
						
						<view :class="item.value === selected_date.value ? 'selected_date' : 'unselected_date'">
							{{item.dayText}}
						</view>
						<view :style="{'visibility':(show_dolt(item.label) ? 'visible' : 'hidden'),'background-color':item.value === selected_date.value ? 'white' : '#00C2C4'}" class="circle dolt"></view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	
	import {get_days,is_empty} from "../utils/utils.js"
	import live_room_item from "./items/live_room_item.vue"
	import fl_btn from "./fl_btn.vue"
	// component/weekday.js
	import {
		request
	} from "../api/request.js"
	import {EventBus} from "../utils/event_bus.js"
	const moment = require("../utils/moment.js");
	const dayToWeekDayMapping = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	const weekDayEnglish = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
		"October", "November", "December"
	]; // const weekDayEnglish = [
	export default {
		name: "weekday",
		data() {
			return {
				date_list: [],
				selected_date: null,
				monthText: null,
				monthEnglish: null,
				scrollIntoId:0
			};
		},
		
		components: {
			fl_btn,
			live_room_item
		},
		watch:{
			dates(newVal){
				console.log(newVal)
				this.dates = newVal
			},
		},
		mounted() {
			// 自动滑动到当天
			var day = parseInt(moment().format("DD"))
			if(day >= 4){
				this.scrollIntoId = "A" + (parseInt(moment().format("DD")) - 1)
			}
			
		},
		props: {
			dates:{
				type:Array,
				default:[]
			},
			dark: Boolean,
			store_code: {
				type: String
			},
			selected_month:moment().month() + 1
			
		},
		beforeMount: function() {
			// this.loadDateList();
		},
		created() {
			this.loadDateList(null,null)
			EventBus.$on(this.constants.DATE_CHANGED,e=>{
				console.log("星期 weekday",e)
				//如果 月和日都切换了
				if(!is_empty(e.day)){
					if(e.day > 4)
					this.scrollIntoId = "A" + parseInt(e.day < 4 ? (e.day-1) : (e.day - 4))
					var s = moment(e.year + "-" + (parseInt(e.month) < 10?'0'+parseInt(e.month) : parseInt(e.month)) +"-"+ (parseInt(e.day) < 10?'0'+parseInt(e.day) : parseInt(e.day))).valueOf()
					var temp = {}
					temp.value = s
					this.selected_date = temp
					console.log(this.selected_date)
				}else{
					var temp = {}
					temp.value = -1
					this.selected_date = temp
				}
				this.loadDateList(e.year,e.month)
			})
		},
		methods: {
			
			show_dolt(value){
				return this.dates.indexOf(value) != -1
			},
			//点击时间
			click_time(item, index) {
				if (this.total_count == 4) {
					this.showToast("最多选取4个时间段")
					return
				}

				this.date_list = [].concat(this.date_list)
			},

			loadDateList: function(y,m) {
				let date_list = [];
				var monthText;
				var monthEnglish;
				var year
				var month 
				if(is_empty(y) || is_empty(m)){
					year = moment().year()
					month = moment().month()
				}else{
					year = y
					month = m - 1
				}
				for (var i = 0; i < get_days(year,month); i++) {
					var now_year = year
					var now_month = month
					var currentTime = moment({y:now_year,M:now_month,d:i+1})//.add(i - now_day, 'days');
					var label = currentTime.format("YYYY-MM-DD");
					
					var value = moment(label)
						.valueOf(); // var text = (i == 0 ? moment().format("今 M.D") : dayToWeekDayMapping[currentTime.format("d")]);
			
					var weekText = dayToWeekDayMapping[currentTime.format("d")]; //周几
					if(moment().format("YYYY-MM-DD") == label){
						weekText = "今天"
					}
					// if (i == 0) {
					// 	weekText = '今天'
					// }
					var dayText = currentTime.format("D"); //日期 日
			
					if (i == 0) {
						monthText = currentTime.format("M"); //日期 月
			
						monthEnglish = weekDayEnglish[currentTime.format("M") - 1];
					}
			
					date_list.push({
						index: 0,
						// text: text,
						weekText: weekText,
						dayText: dayText,
						value: value,
						label: label
					});
				}
			
			
				this.date_list = date_list
				// debugger
				this.monthText = monthText
				this.monthEnglish = monthEnglish
			},
			getSelectedDate() {
				return this.selected_date;
			},
			set_selected_date(value){
				this.selected_date = value
			},
			set_index: function() {
				this.selected_date = this.date_list[1]
			},

			switchDay: function(e) {
				// dayText: "2"
				// index: 0
				// label: "2021-09-02"
				// value: 1630512000000
				// weekText: "周四"
				console.log(e.currentTarget.dataset.currentday)
				this.selected_date = e.currentTarget.dataset.currentday
				let year = this.selected_date.label.split("-")[0]
				let month = this.selected_date.label.split("-")[1]
				let day = this.selected_date.label.split("-")[2]
				EventBus.$emit(this.constants.DATE_CHANGED,{year:year,month:month,day:day,from:"weekday"})
				// this.$emit('weekdaychange', {
				// 	detail: {
				// 		date: e.currentTarget.dataset.currentday
				// 	}
				// });
			}
		}
	};
</script>
<style>
	.selected_week {
		color: white;
		font-size: 16rpx;
	}

	.unselected_week {
		color: #97989C;
		font-size: 16rpx;
	}

	.selected_date {
		margin-top: 4rpx;
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}

	.unselected_date {
		margin-top: 4rpx;
		color: #97989C;
		font-size: 28rpx;
		border-radius: 12rpx;
		font-weight: bold;
	}

	.weekDayClass {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		padding: 0rpx 28rpx 22rpx 28rpx;
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px 0 rgba(212, 212, 212, 0.8);
	}

	.date_list {
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.date_list .weekDate {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* padding: 0 22rpx 0 22rpx; */
	}

	.date_list .current {
		/* background-color: #2EC3B1;
  color: #FFF;
  border-radius: 6rpx; */
	}

	.date_list .current .weekText {
		font-size: 24rpx;
		color: #101010;
		font-weight: bold;
	}

	.date_list .current .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #272F30;
		font-size: 24rpx;

		font-weight: bold;
	}

	.date_list .normal .weekText {
		color: #101010;
		font-size: 24rpx;
	}

	.date_list .normal .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.date_list .current .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #2EC3B1;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.date_list .normal .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #fff;
	}

	

	.time_selected {
		/* margin-top: 28rpx; */
		background-color: white;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx #00C2C4;
		border-radius: 2rpx;
		color: #00C2C4;
		font-size: 28rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
	}

	.time_unselected {
		/* margin-top: 28rpx; */
		background-color: white;
		border-radius: 2rpx;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx white;
		color: $black;
		font-size: 28rpx;
	}
	
	.dolt{
		height: 6rpx;
		width: 6rpx;
		background-color: #00C2C4;
	}
</style>
